<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="no-referrer" />
    <title>video</title>
    <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .video-js,
        video {
            width: 100%;
            height: 100%;
        }
    </style>
    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
    <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>


    <video id="videojs" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup="{}">
    </video>

    <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>

</body>

<script>
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) { return pair[1]; }
        }
        return (false);
    }

    var option = {
        autoplay: 'true',
        controls: true,
        //muted: false,
        fullscreen: {
            options: { navigationUI: 'hide' }
        },
        sources: []
    }
    videojs("videojs", option).ready(function () {
        var url = getQueryVariable('url');
        this.src(url);
    });
</script>

</html>